<template>
  <div>
    <el-dialog @close="close" :title="formData.id ? '修改班级' : '添加班级'" :visible.sync="showDialog">
      <el-form
        v-if="showDialog"
        label-width="120px"
        inline
        :model="formData"
        :rules="formRules"
        ref="form"
      >
        <el-form-item label="班级名称" prop="class_name">
          <el-input v-model="formData.class_name" placeholder="请输入班级名称"></el-input>
        </el-form-item>
        <el-form-item label="归属学科" prop="subject_name">
          <el-select v-model="formData.subject_id" placeholder="归属学科">
            <el-option v-for="item in subject" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="授课老师" prop="teacher_info">
          <el-select multiple v-model="formData.teacher_info" placeholder="请选择授课老师">
            <el-option
              v-for="item in teacher_infolist"
              :key="item.user_id"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="助教老师" prop="zhujiao_info">
          <el-select multiple v-model="formData.zhujiao_info" placeholder="请在选择助教老师">
            <el-option
              v-for="item in zhujiao_infolist"
              :key="item.user_id"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班主任" prop="manager_info">
          <el-select multiple v-model="formData.manager_info" placeholder="请在选择班主任">
            <el-option
              v-for="item in manager_infolist"
              :key="item.user_id"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开课结课日期" prop>
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" label="描述文字"></el-input-number>
        </el-form-item>
        <el-form-item label="班级状态" prop="state">
          <el-switch
            v-model="formData.state"
            :active-value="1"
            :inactive-value="2"
            active-text="正常"
            inactive-text="关闭"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Cancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTeacherList, addClassAPi, editClassApi } from '@/api/class'
export default {
  name: 'ADD',
  props: {
    subject: {
      type: Array,
      reuqired: 'true',
    },
  },
  data() {
    return {
      showDialog: false,
      formData: {
        class_name: '',
        subject_id: '',
        teacher_info: [],
        zhujiao_info: [],
        manager_info: [],
        sort: 1, //排序
        state: '', //状态，
        start_time: '',
        end_time: '',
      },
      formRules: {
        class_name: [{ required: true, message: '请输入', trigger: 'blur' }],
        subject_id: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      teacher_infolist: [],
      zhujiao_infolist: [],
      manager_infolist: [],
      value1: [],
    }
  },
  created() {
    this.initData()
  },
  // watch: {
  //   formData:{
  //   handler(newVal,oldVal){
  //   console.log(newVal);
  //   },
  //     deep: true, // 深度侦听(对象里面层的值改变)
  //       immediate: true // 立即侦听(网页打开handler执行一次)
  //   }
  // },
  methods: {
    async initData() {
      let res1 = await getTeacherList({ role_name: '讲师' })
      let res2 = await getTeacherList({ role_name: '助教' })
      let res3 = await getTeacherList({ role_name: '班主任' })
      console.log(res1, res2, res3)
      this.teacher_infolist = res1
      this.zhujiao_infolist = res2
      this.manager_infolist = res3
    },

    // 发送请求
    async btnOk() {
      // 表单验证
      try {
        await this.$refs.form.validate()
      } catch (error) {
        console.log(error)
      }
      this.formData.start_time = this.value1[0]
      this.formData.end_time = this.value1[1]
      console.log(this.teacher_infolist)
      //数据处理
      let arr1 = []
      let arr2 = []
      let arr3 = []
      this.teacher_infolist.forEach((item) => {
        this.formData.teacher_info.forEach((itm) => {
          if (item.username == itm) {
            arr1.push(item)
          }
        })
      })
      this.zhujiao_infolist.forEach((item) => {
        this.formData.zhujiao_info.forEach((itm) => {
          if (item.username == itm) {
            arr2.push(item)
          }
        })
      })
      this.manager_infolist.forEach((item) => {
        this.formData.manager_info.forEach((itm) => {
          if (item.username == itm) {
            arr3.push(item)
          }
        })
      })

      console.log(arr1)
      this.formData.teacher_info = arr1
      this.formData.zhujiao_info = arr2
      this.formData.manager_info = arr3
      if (this.formData.id) {
        await editClassApi(this.formData)
      } else {
        await addClassAPi(this.formData)
      }

      this.$message.success('操作成功')
      this.showDialog = false
      console.log('ok')
      this.$emit('updateList')
      console.log('ok11')
    },
    // 取消按钮
    Cancel() {
      this.formData = {}
      this.showDialog = false
    },
    // 表单关闭事件
    close() {
      this.formData = {}
      this.value1 = []
    },
  },
}
</script>

<style lang="scss" scoped>
</style>